// Función que recibe la respuesta del servidor cuando se sube la imagen de perfil del candidato
function processJson(response){ 
    if(response.error !== ""){
        $("div#container-candidato-perfil div#tips")
            .css({"padding": "3px", "font-size": "12px"})
            .addClass("ui-state-highlight ui-corner-all")
            .html(response.error);
        $("form#formImg input,button").removeClass("ui-state-highlight");
        $("div#container-candidato-perfil button#upload").removeClass("ui-state-focus");
    }
    if(response.success === 1){
        var img = response.data.file_name;
        $("div#container-candidato-perfil #img-perfil").removeAttr("src").attr("src", "<?php echo base_url().'application/uploads/candidatos/" + img  + "'  ?>");
        $("div#container-candidato-perfil #formImg").css({"visibility":"hidden"});
        $("button#changeimg", "#container-candidato-perfil").css({"visibility":""}).button("option", "disabled", true);
        $("div#container-candidato-perfil div#tips")
            .removeClass("ui-state-highlight")
            .css({"padding": "3px", "font-size": "12px"})
            .addClass("ui-state-active ui-corner-all")
            .html("<div class='ui-state-highlight' style='padding:3px;'>La imagen fue actualizada correctamente.</div>");
        setTimeout(function(){
            $("div#container-candidato-perfil div#tips")
                .css({"padding": "0px"})
                .removeClass("ui-state-active")
                .html("");
        }, 2000);
        $(".forms input,textarea,select,input:radio,input:checkbox")
            .attr("disabled", "disabled")
            .removeClass("ui-state-highlight ui-form-elm-active ui-checkbox-active")
            .addClass("ui-widget-content");                    
        $("div#container-candidato-perfil button#edit")
            .button("option", "label", "Editar")
            .button("option", "icons", {primary:'ui-icon-pencil'})
            .removeClass("ui-state-focus");
    }
}

$(document).ready(function () {

    //Uso del expander de wijmo
    $("div#container-candidato-perfil div#expander").wijexpander({
        animated: "animateExpander"
    });

    //Uso del button Jquery-UI
    $("#container-candidato-perfil button#changeimg").button({ icons:{primary:"ui-icon-image"}, disabled:true });
    $("div#container-candidato-perfil button#change-pwd").button({ icons:{primary:"ui-icon-refresh"} });
    $("div#container-candidato-perfil button#exportar-cv").button({ icons:{primary:"ui-icon-refresh"} });
    $("div#container-candidato-perfil button#renovar").button({ icons:{primary:"ui-icon-refresh"} });
    $("div#container-candidato-perfil button#edit").button({ icons:{primary:"ui-icon-pencil"} })
        .live("click", function(){
            var labelButton = $(this).button("option", "label");
            if(labelButton === "Editar"){

                //Se activa el tooltip para indicar el tamano recomendado para la imagen de perfil del candidato
                $("div#container-candidato-perfil input#input_img").wijtooltip();

                //Destaco los inputs y los textareas
                $(".forms input,textarea,select")
                    .removeAttr("disabled")
                    .addClass("ui-form-elm-active")
                    .live("input", function(){//Cuando los input y textareas cambien se habilita el boton Guardar...
                        $("div#container-candidato-perfil button#edit")
                            .button("option", "label", "Guardar")
                            .button("option", "icons", {primary:'ui-icon-disk'});
                    });
                $(".forms input:radio,input:checkbox,select").live("change", function(){
                    $("div#container-candidato-perfil button#edit")
                        .button("option", "label", "Guardar")
                        .button("option", "icons", {primary:'ui-icon-disk'});
                })
                //A los checkbox y radios se les aplica una clase de highlighting distinta porque el border no se le puede cambiar el color con css en la mayoria de los navegadores, por lo que se asigna la clase ui-checkbox-active que utiliza el atributo outline
                $(".forms input:checkbox,input:radio").addClass("ui-checkbox-active");
                $("div#container-candidato-perfil button#changeimg").button("option", "disabled", false)
                    .live("click", function(){
                        $(this).css({"visibility":"hidden"});
                        $("div#container-candidato-perfil #formImg").each (function(){ this.reset(); })
                            .css({"visibility":""});
                    });

                //Se activa el slider si el candidato es discapacitado
                $("div#container-candidato-perfil input#minusvalia").live("change", function(){
                    if($(this).prop("checked")){                        
                        $("#container-candidato-perfil #slider")
                            .css({"visibility":""})
                            .slider({
	                        range: "min",
	                        min: 0,
	                        max: 100,
	                        slide: function( event, ui ) {
	                            $("#grado_min").val(ui.value + "%");
	                        }
                            });
                        $("#container-candidato-perfil #grado_min").css({"visibility":""});
                    }
                    else{
                        $("#container-candidato-perfil #slider").css({"visibility":"hidden"});
                        $("#container-candidato-perfil #grado_min").css({"visibility":"hidden"});
                    }
                })

                //se activan los calendarios para los inputs de tipo fecha
                $("#container-candidato-perfil .date").datepicker({
                    changeMonth: true,
		    changeYear: true
		});
                
                //Habilito el icono de eliminación de las tags
                $("div#container-candidato-perfil a.tagit-close")
                    .append('<span></span>')
                    .addClass('ui-icon ui-icon-close');

                //Destaco los contenedores de las tags
                $("div#container-candidato-perfil ul.tagit")
                    .removeAttr("disabled")
                    .addClass("ui-form-elm-active");
            
            }
            else{
                var data = {};
                $(".forms input,textarea,select").each(function(){
                    var elmName = $(this).attr("name");
                    var elmValue = $(this).val();
                    var sms = $('input:checkbox[name=sms]:checked').val();
                    var sexo = $('input:radio[name=sexo]:checked').val();
                    if(elmName !== "sms" && elmName !== "sexo" )
                        data[elmName] = elmValue;
                    else{           
                        if(data[elmName] === "sms"){
                            if(checked === "on")
                                data[elmName] = 1;
                            else
                                data[elmName] = 0;
                        }
                        else{
                            if(elmValue === "M")
                                data[elmName] = 0;
                            else
                                data[elmName] = 1;
                        }
                    }
                });

                $.post("<?php echo site_url($this->url.'updateData') ?>", data, function(data){
                    if(data.error !== ''){
                        $("div#container-candidato-perfil div#tips")
                            .css({"padding": "3px", "font-size": "12px"})
                            .addClass("ui-state-highlight ui-corner-all")
                            .html(data.error);
                        $(".forms input,textarea,select").removeClass("ui-state-highlight");
                        var arrayError = data.array_error;
		        var arrayErrorStr = arrayError.join(',#');
                        $("div#container-candidato-perfil #"+arrayErrorStr).addClass("ui-state-highlight");
                        $("div#container-candidato-perfil button#edit").removeClass("ui-state-focus");
                    }
                    else{
                        $("div#container-candidato-perfil div#tips")
                            .removeClass("ui-state-highlight")
                            .css({"padding": "3px", "font-size": "12px"})
                            .addClass("ui-state-active ui-corner-all")
                            .html("<div class='ui-state-highlight' style='padding:3px;'>Los datos fueron actualizados correctamente.</div>");
                        setTimeout(function(){
                            $("div#container-candidato-perfil div#tips")
                                .css({"padding": "0px"})
                                .removeClass("ui-state-active")
                                .html("");
                        }, 2000);
                        $(".forms input,textarea,select,input:checkbox,input:radio")
                            .attr("disabled", "disabled")
                            .removeClass("ui-state-highlight ui-form-elm-active ui-checkbox-active")
                            .addClass("ui-widget-content");          
                        $("button#changeimg", "#container-candidato-perfil").button("option", "disabled", true);                
                        $("div#container-candidato-perfil button#edit")
                            .button("option", "label", "Editar")
                            .button("option", "icons", {primary:'ui-icon-pencil'})
                            .removeClass("ui-state-focus");
                    }
                }, "json");
                
                //Se manda a ocultar el slider y el input de minusvalia (en caso de encontrarse visible)
                $("#container-candidato-perfil #slider").css({"visibility":"hidden"});
                $("#container-candidato-perfil #grado_min").css({"visibility":"hidden"});
            }
        });
    
    // Uso de las Tabs Jquery-UI
    $("div#container-candidato-perfil div#fichas").tabs({
        selected: 1, //temporal
        collapsible: true,
        fx: { opacity: 'toggle', duration: 'fast' }
    }).find( ".ui-tabs-nav" ).sortable({ axis: "x" });

    // Uso del Accordion de wijmo
    $("div#container-candidato-perfil div#accordion-ficha1").wijaccordion({
        requireOpenedPane: false,
        animated: "animateAccordion"
    });
    //Se activan todas las secciones del accordion de la tab 1.
    $("div#container-candidato-perfil div#accordion-ficha1")
        .wijaccordion("activate", 1)
        .wijaccordion("activate", 2)
        .wijaccordion("activate", 3);

    $("div#container-candidato-perfil div#accordion-ficha2").wijaccordion({
        requireOpenedPane: false,
        animated: "animate"
    });
    //Se activan todas las secciones del accordion de la tab 2.
    $("div#container-candidato-perfil div#accordion-ficha2")
        .wijaccordion("activate", 1);

    $("div#container-candidato-perfil div#accordion-ficha3").wijaccordion({
        requireOpenedPane: false,
        animated: "animate"
    });

    $("div#container-candidato-perfil div#accordion-ficha4").wijaccordion({
        requireOpenedPane: false,
        animated: "animate"
    });

    //Estilando el input file para la subida de la imagen (http://sourceforge.net/projects/fileinput/)
    $("form#formImg input#input_img").fileinput({ buttonText: "Examinar" }); 
    $("form#formImg button#upload").button({ icons:{primary:"ui-icon-disk"} });

    //Utilizando el plugin jquery.form.js (http://jquery.malsup.com/form/) para enviar la imagen via ajax
    $("div#container-candidato-perfil form#formImg").ajaxForm({ 
        dataType:  'json', 
        success:   processJson 
    }); 

    //Utilizando las tags al estilo de Jquery-UI (http://aehlke.github.com/tag-it/)
    $.post("candidato/autocomplete", {"table":"areas_conocimientos"}, function(data){
        $("div#container-candidato-perfil input#tagsConocimientos").tagit({
            allowSpaces: true,
            removeConfirmation: true,
            availableTags: data.areasConocimientos
        }).tagit('option', 'onTagAdded', function(evt, tag) {
            // Add this callbackafter we initialize the widget,
            // so that onTagAdded doesn't get called on page load.
            alert('This tag is being added: ' + $("div#container-candidato-perfil input#tagsConocimientos").tagit('tagLabel', tag));
        });
    }, "json");

    $("div#conocimientos .tagit input.ui-autocomplete-input").live("click", function(){

        //$(this, "a.tagit-close").prop("disabled", true);
        // $(".ui-icon-close").live("click", function(event){
        //     $("div#conocimientos .tagit-close .ui-icon-close").addClass("text-icon");
        // })
    });

});